<template>
    <uni-popup ref="popup" background-color="#fff" @change="change" :mask-click="false">
    	<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <text class="text">想得美</text>
        <button @click="close">x</button>
          </view>
    </uni-popup>
    
    
    
<!--  <view>
    <u-overlay :show="show" @click="show = false">
      <view class="bg-fff margin padding">
        <view class="flex justify-between info">
          <image class="poster margin-right" src="" mode=""></image>
          <view class="">
            草莓蛋糕
            <view class="margin-tb-xs">
              CAOMEI
            </view>
           </view>
          </view>
          <view class="flex justify-between padding-tb u-border-bottom">
            <view class="">
              规格选择
            </view>
            <view class="">
              1磅
            </view>
          </view>
          <view class="flex justify-between align-center padding-tb-sm u-border-bottom">
            <view class="">
              数量选择
            </view>
            <u-number-box 
                button-size="26"
            ></u-number-box>
        </view>
      </view>
    </u-overlay>
  </view> -->
</template>

<script>
  export default {
    data() {
      return {
          show: false,
      };
    },
    onReady() {},
    methods: {
      // 弹框
      change(e) {
      	this.show = e.show
      },
      // 关闭弹窗
      close() {
      	this.$refs.popup.close()
      },
      toggle(type) {
      	this.type = type
      	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      	this.$refs.popup.open(type)
      },
    }
  }
</script>

<style lang="scss">
    // 弹框
    	@mixin flex {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    	}
    
    	@mixin height {
    		/* #ifndef APP-NVUE */
    		height: 100%;
    		/* #endif */
    		/* #ifdef APP-NVUE */
    		flex: 1;
    		/* #endif */
    	}
    	.popup-content {
    		@include flex;
    		align-items: center;
    		justify-content: center;
    		padding: 15px;
    		height: 50px;
        width: 80%;
    		background-color: #fff;
        .text {
        	font-size: 12px;
        	color: #333;
        }
    	}
    
    	.popup-height {
    		@include height;
    		width: 200px;
    	}
</style>
